<template>
  <div class="kva-container">
    <div class="kva-contentbox">
      <home-page-header>
        <div class="flex w100">
          <div style="width: 480px;background:#fff;border-radius: 8px;padding: 10px;">
            <div class="flex mb10">
              <el-input v-model="queryParams.keyword" placeholder="请输入标题、标签、作者"></el-input>
              <el-button icon="search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                v-loading="tableLoading"
                ref="tableRef"
                :data="tableData"
                border
                @selection-change="handleSelectionChange"
                :height="tableHeight"
            >
              <el-table-column label="标题" >
                <template #default="scope">
                  <a :href="currentSystem.domain+'/course/detail/'+scope.row.id" target="_blank">
                    {{ scope.row.title }} / <span class="fz12 c999">(作者：{{scope.row.nickname}})</span>
                  </a>
                </template>
              </el-table-column>
              <el-table-column  label="操作" align="center" width="120">
                <template #default="scope">
                  <el-button icon="edit" :type="[currentIndex == scope.$index?'success':'primary']" size="small" @click.stop="handleCreateCode(scope.row,scope.$index)"
                  >创建兑换码</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="kva-pagination-box center">
              <el-pagination
                  :current-page="queryParams.pageNo"
                  :page-size="queryParams.pageSize"
                  layout="total, prev, pager, next"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
              />
            </div>
          </div>
          <kva-comment ref="commentRef" @load="handleResetData"></kva-comment>
        </div>
      </home-page-header>
    </div>
  </div>
</template>
<script setup>
import { findPages as findDownLoadPages } from '@/api/course/index.js'
import KvaComment from './components/Comment.vue'
import { useUserStore } from '@/stores/users.js'
const userStore = useUserStore();
const currentIndex = ref(-1)
const currentSystem = computed(() => userStore.systemList?.filter(c => c.defaultFlag == 1)[0])
// 搜索属性定义
const queryParams = reactive({
  pageNo: 1,
  pageSize: 30,
  status: 1,
  keyword: ''
})
const commentRef = ref({})
// 定义响应式得列表数据容器
const tableData = ref([])
const tableHeight = ref('calc(100vh - 240px)')
const tableLoading = ref(false)
const pages = ref(0)
const total = ref(0)
const searchForm = ref({})
const tableRef = ref({})

// 加载数据
const handleLodeData = async () => {
  tableLoading.value = true
  const resp = await findDownLoadPages(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total * 1
  pages.value = resp.data.pages * 1
}

// 搜索
const handleSearch = () => {
  queryParams.pageNo = 1
  handleLodeData()
}

// 重置
const handleReset = () => {
  searchForm.value.resetFields()
  handleSearch()
}

// 分页size更改
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  handleLodeData()
}

// 分页pageNo更改
const handleCurrentChange = (pno) => {
  queryParams.pageNo = pno
  handleLodeData()
}

const handleCreateCode = (row,index) =>{
  currentIndex.value = index
  commentRef.value.handleLodeDataComment(row.id)
}

const handleResetData = ()=>{
  currentIndex.value = -1
}

onMounted(() => {
  handleLodeData()
})
</script>
<style scoped>
</style>
